// src/app/workspace/[workspaceId]/channel/[channelId]/_components/header.tsx
import React, {useEffect, useState} from 'react';
import {Button} from "@/components/ui/button";
import {FaChevronDown} from "react-icons/fa";
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger
} from "@/components/ui/dialog";
import {TrashIcon} from "lucide-react";
import {Input} from "@/components/ui/input";
import {useUpdateChannel} from "@/features/channels/api/use-update-channel";
import {useChannelId} from "@/hooks/social/use-channel-id";
import {toast} from "sonner";
import {useRemoveChannel} from "@/features/channels/api/use-remove-channel";
import useConfirm from "@/hooks/social/use-confirm";
import {useRouter} from "next/navigation";
import {useWorkspaceId} from "@/hooks/social/use-workspace-id";
import {useCurrentMember} from "@/features/workspaces/api/use-current-member";
import {Member} from "@/lib/social/types";
import {useCurrentUser} from "@/hooks/use-current-user";

interface Props {
    title: string;
}

const Header = ({title}: Props) => {
    const user = useCurrentUser()

    const channelId = useChannelId()
    const workspaceId = useWorkspaceId()

    const [ConfirmDialog, confirm] = useConfirm(
        "Delete this channel?",
        "You are about to delete this channel. This action is irreversible",
    )

    const [value, setValue] = useState(title)
    const [editOpen, setEditOpen] = useState(false)

    const [member, setMember] = useState<Member>()
    const [m_loading, setMLoading] = useState<boolean>(false)
    useEffect(() => {
        (async () => {
            const {data, isLoading} = await useCurrentMember({
                workspaceId, userId: user?.id!
            })
            setMLoading(isLoading)
            setMember(data)
        })()
    }, [m_loading]);

    const {mutate: updateChannel, isPending: isUpdatingChannel} = useUpdateChannel()
    const {mutate: removeChannel, isPending: isRemovingChannel} = useRemoveChannel()

    const handleEditOpen = (value: boolean) => {
        if (member?.role !== 'admin') return

        setEditOpen(value)
    }

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // 输入的 空格 转 -
        const value = e.target.value.replace(/\s+/g, '-').toLowerCase()
        setValue(value)
    }

    const router = useRouter()
    const handleDelete = async () => {
        const ok = await confirm()
        if (!ok) return

        await removeChannel({id: channelId}, {
            onSuccess() {
                toast.success("Channel deleted")
                router.push(`/social/workspace/${workspaceId}`)
            },
            onError() {
                toast.error("Failed to delete channel")
            }
        })
    }

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()

        await updateChannel({id: channelId, name: value}, {
            onSuccess() {
                toast.success("Channel updated")
                setEditOpen(false)
            },
            onError() {
                toast.error("Failed to update channel")
            },
        });
    }

    return (
        <div className={`bg-white border-b h-[49px] flex items-center px-4 overflow-hidden`}>
            <ConfirmDialog/>
            <Dialog>
                {/*In HTML, <button> cannot be a descendant of <button>.
                   This will cause a hydration error.*/}
                <DialogTrigger asChild>
                    <Button
                        variant={'ghost'}
                        className={`text-lg font-semibold px-2 overflow-hidden w-auto`}
                        size={'sm'}
                    >
                        <span className={`truncate`}># {title}</span>
                        <FaChevronDown className={`size-2.5 ml-2`}/>
                    </Button>
                </DialogTrigger>
                <DialogContent className={`p-0 bg-gray-50 overflow-hidden`}>
                    <DialogHeader className={`p-4 border-b bg-white`}>
                        <DialogTitle>
                            # {title}
                        </DialogTitle>
                    </DialogHeader>
                    <div className={`px-4 pb-4 flex flex-col gap-y-2`}>
                        <Dialog open={editOpen} onOpenChange={handleEditOpen}>
                            <DialogTrigger asChild>
                                <div className={`px-5 py-4 bg-white rounded-lg cursor-pointer border hover:bg-gray-50`}>
                                    <div className={`flex items-center justify-between`}>
                                        <p className={`text-sm font-semibold`}>
                                            Channel name
                                        </p>
                                        {member?.role === 'admin' && (
                                            <p className={`text-sm text-[#1264a3] hover:underline font-semibold`}>
                                                Edit
                                            </p>
                                        )}
                                    </div>
                                    <p className={`text-sm`}>
                                        # {title}
                                    </p>
                                </div>
                            </DialogTrigger>
                            <DialogContent>
                                <DialogHeader>
                                    <DialogTitle>
                                        Rename this channel
                                    </DialogTitle>
                                </DialogHeader>
                                <form onSubmit={handleSubmit} className={`space-y-4`}>
                                    <Input
                                        value={value}
                                        disabled={isUpdatingChannel}
                                        onChange={handleChange}
                                        required
                                        autoFocus
                                        minLength={3}
                                        maxLength={80}
                                        placeholder={'e.g. plan-budget'}
                                    />
                                    <DialogFooter>
                                        <Button disabled={isUpdatingChannel}>
                                            Save
                                        </Button>
                                        <DialogClose asChild>
                                            <Button
                                                variant={'outline'}
                                                disabled={isUpdatingChannel}>
                                                Cancel
                                            </Button>
                                        </DialogClose>
                                    </DialogFooter>
                                </form>
                            </DialogContent>
                        </Dialog>
                        {member?.role === 'admin' && (<button
                            onClick={handleDelete}
                            disabled={isRemovingChannel}
                            className={`flex items-center gap-x-2 px-5 py-4 bg-white rounded-lg cursor-pointer
                            hover:bg-gray-50 border text-rose-600`}
                        >
                            <TrashIcon className={`size-4`}/>
                            <p className={`text-sm font-semibold`}>Delete channel</p>
                        </button>)}
                    </div>
                </DialogContent>
            </Dialog>
        </div>
    );
};

export default Header;